<template>
    <div class="app">
      <div class="header">
          <h2>饿了么</h2>
          <span @click="hand(index)" :class="{active:arrindex==index}" v-for="(item,index) in title" :key="index">{{item}}</span>
      </div>
      <div class="good" v-for="(item,index) in good" :key="index">
          <div class="left">
              <img src="../../assets/good1.webp" alt="">
          </div>
          <div class="right">
              <p>{{item.title}}</p>
              <p>{{item.name}}</p>
              <p>{{item.little}}</p>
              <span>￥{{item.price}}</span>
              <button>{{item.go}}</button>
          </div>
      </div>
    </div>
   
  </template>
  
  <script>
  export default {
  data(){
      return {
          arrindex:0,
          title:["全部","待消费","待评价","退款"],
          good:[
              {
  title:"汉堡王|新天地餐厅",
  name:"买1送1明星黄堡|用心火烤 肉质紧实 鲜嫩多汁",
  
  price:25,
  oldprice:50,
  
  go:"再来一单"
  
              },
              {
  title:"华莱士|长治路店",
  name:"华莱士|聚划算单人套餐|进店必选",
  
  price:12.2,
  oldprice:31.2,
  num:173,
  go:"再来一单"
  
              },
              {
  title:"贡天下山西特产|高新店",
  name:"白老大小米果仁酥200g【爆爆团】",
  
  price:30,
  oldprice:89.6,
  num:160,
  go:"再来一单"
              }
          ]
      }
  }
  }
  </script>
  
  <style lang="scss" scoped>
  
  .header h2 {
      text-align: center;
      margin-bottom: 30px;
  }
  .header span {
      padding: 4px 10px;
  
  }
  .active {
      font-weight: bold;
      font-size: 17px;
      border-bottom: 3px solid skyblue;
  }
  .good{
      width: 90%;
      height: 167px;
      margin: 0 5%;
      margin-bottom: 10px;
      padding: 10px;
      box-sizing: border-box;
      border-radius: 10px;
      background: #fff;
  }
  .left {
      float: left;
  }
  .right {
      float:left;
      margin-left: 10px;
  }
  .left img {
      width: 97px;
      height: 126px;
  }
  .right p:nth-child(1){
      color: #999;
      padding: 4px 0;
      width: 200px;
  }
  .right p:nth-child(2){
      font-size: 18px;
      font-weight: bold;
      width: 200px;
      word-wrap: break-word;
  }
  .right p:nth-child(3){
      color: red;
      color: 14px;
  }
  .right span:nth-child(4){
      color: red;
      font-weight: bold;
      font-size: 18px;
  }
  .right button:nth-child(5){
      background: rgb(255, 255, 255);
      color: rgb(47, 185, 240);
      border: 1px solid skyblue;
      outline: none;
      height: 30px;
      border-radius:30px ;
      width: 98px;
      text-align: center;
      margin-left:50px ;
  }
  .right p:nth-child(6) span:nth-child(1){
      color: #999;
      font-size: 13px;
  }
  .right p:nth-child(6) span:nth-child(2){
      margin-left: 87px;
      color: crimson;
      font-size: 13px;
  }
  </style>